@use "@styles/mixins/bem" as *;
@use "@styles/mixins/function" as *;

@include b(chat-person-item) {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: all cssVarEl(transition-duration) ease;

  @include is(active) {
    background-color: cssVarEl(fill-color-light);
  }

  &:hover {
    background-color: cssVarEl(fill-color-light);
  }

  @include e(avatar-wrapper) {
    position: relative;
    margin-right: 12px;
  }

  @include e(status-dot) {
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 9px;
    height: 9px;
    background-color: cssVarEl(color-error);
    border-radius: 50%;
    @include is(online) {
      background-color: cssVarEl(color-success);
    }
  }

  @include e(info) {
    flex: 1;
    min-width: 0;
  }

  @include e(info-top) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;

    .name {
      font-size: 14px;
      font-weight: 500;
      color: cssVarEl(text-color-primary);
    }

    .last-time {
      font-size: 12px;
      color: cssVarEl(text-color-secondary);
    }
  }

  @include e(info-bottom) {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .email {
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      color: cssVarEl(text-color-secondary);
      white-space: nowrap;
    }
  }
}
